<template>
  <div class="home-info">
    <div class="wrapper">
      <div class="serve">
        <div>
          <span class="key-word simple">简约</span>
          <span class="key-word easy">好用</span>
          <span class="key-word free">免费</span>
        </div>
        <p class="slogan">腾讯问卷为您提供专业调研服务</p>
      </div>
      <div class="advisory">
        <p class="bold-issue">
          任何建议和问题随时
          <a class="speak" href="">吐个槽</a>
        </p>
        <div class="contacts">
          <div class="site official">
            官方邮箱：<a class="tencent mailbox" href="">wj@tencent.com</a></div>
          <div class="site">官方微博：<a class="tencent surface" href="">腾讯问卷</a></div>
          <div class="site">官方QQ群：<a class="tencent group" href="">365694489</a></div>
          <div class="site service-QQ ">客服QQ：<a class="tencent consult online-consultant"
            href="">在线咨询</a></div>
        </div>
      </div>
      <div class="qr-code">
        <img class="wx-code" src="../assets/22.png" alt="">
        <div class="bold">扫描关注微信公众号</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

};
</script>

<style lang="scss" scoped>
.home-info{
  margin-top: 75px;
  background: #f5f5f5;
  padding-bottom: 13px;
}

.wrapper{
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.serve{
  padding: 38px;
  position: relative;
  margin-left: -18px;
}

.key-word{
  line-height: 24px;
  display: inline-block;
  padding: 15px 0 15px 60px;
  margin-right: 26px;
  font-size: 20px;
  color: #58a6e7;
  position: relative;
}

.bold-issue{
  padding-top: 17px;
  margin-bottom: 21px;
}

.simple{
  background-image: url('../assets/18.png');
  background-repeat: no-repeat;
}

.easy {
  background-image: url('../assets/19.png');
  background-repeat: no-repeat;
}

.free{
  background-image: url('../assets/20.png');
  background-repeat: no-repeat;
}

.slogan{
  margin-top: 22px;
  color: #999;
  font-size: 22px;
  margin-bottom: 0;
}

.advisory{
  margin-right: 115px;
}

.speak{
  text-decoration: none;
  color: #58a6e7;
}

.contacts{
  color: #999;
  font-size: 13px;
}

.service-QQ{
  position: relative;
  // margin-left: 4px;
}

.consult{
  background-image: url('../assets/21.png');
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: 18px;
  height: 30px;
  display: inline-block;
  line-height: 30px;
  background-position: 7px;
  padding-left: 28px;
  padding-right: 7px;
  position: absolute;
  left: 58px;
  top: -2px;
  border: 1px solid #dadee7;
}

.tencent{
  font-size: 13px;
  text-decoration: none;
  color: black;
  margin-left: 0px;
  width: 96px;
  box-sizing: border-box;
  text-align: center;
}

.tencent:hover {
  color: #58a6e7;
}

.wx-code{
  height: 100px;
  width: 100px;
}

.bold{
  position: relative;
  top: -2px;
  left: -1px;
  color: #999;
  font-size: 13px
}

.qr-code{
  position: relative;
  padding-top: 18px;
  text-align: center;
  left: -67px;
  top: 8px;
}

.site{
  margin-bottom: 5px;
}

.online-consultant{
  font-size: 14px;
  line-height: 28px;
  margin-left: 4px;
}
</style>
